<div class="forms-wrap">
    <!-- 基础信息 START -->
    <h3>基本信息</h3>
    <!-- 名称 -->
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            名称
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <input
                nz-input
                maxlength="20"
                placeholder="请输入名称"
                [(ngModel)]="formDatas.name"
                [disabled]="routeForms.mode == 2">
        </nz-form-control>
    </nz-form-item >

    <!-- 所属渠道 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            所属渠道
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-select
                nzShowSearch
                nzAllowClear
                nzMode="multiple"
                nzPlaceHolder="请选择渠道"
                [(ngModel)]="channelSelected"
                (ngModelChange)="channelChange($event)">
                <nz-option
                    *ngFor="let item of channelLists"
                    [nzLabel]="item.name"
                    [nzValue]="item.content">
                </nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item >

    <!-- 所属业务 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            所属业务
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-select
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择业务"
                [(ngModel)]="formDatas.belongingBusiness">
                <nz-option
                    *ngFor="let item of businessLists"
                    [nzLabel]="item.name"
                    [nzValue]="item.content">
                </nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item >

    <!-- 所属页面 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            所属页面
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <input
                nz-input
                maxlength="20"
                placeholder="请输入所属页面"
                [(ngModel)]="formDatas.belongingPage"
                [disabled]="routeForms.mode == 2">
        </nz-form-control>
    </nz-form-item >

    <!-- 比例/尺寸 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            比例/尺寸
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <input
                nz-input
                maxlength="20"
                placeholder="请输入比例/尺寸"
                [(ngModel)]="formDatas.size"
                [disabled]="routeForms.mode == 2">
        </nz-form-control>
    </nz-form-item >
  
    <!-- 备注说明 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            备注说明
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-textarea-count [nzMaxCharacterCount]="100">
                <textarea
                    class="textarea-cont"
                    nz-input
                    maxlength="100"
                    placeholder="仅内部可见"
                    [(ngModel)]="formDatas.remark"
                    [disabled]="routeForms.mode == 2">
                </textarea>
            </nz-textarea-count>
        </nz-form-control>
    </nz-form-item >
    <!-- 基础信息 END -->
  
    <!-- 广告配置 START -->
    <h3 class="title-h">广告配置</h3>

    <div class="table-box">
        <p class="table-tp">
            <button nz-button nzType="primary" (click)="selectModel()">选择广告</button>
        </p>

        <!-- Table -->
        <div class="table-wrap">
            <!-- 增加财务报表-收款 明细 -->
            <nz-table
                #basicTable
                nzSize="small"
                nzBordered
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzData]="tableData"
            >
                <thead>
                    <tr>
                    <th nzAlign="center" nzWidth="80px">序号</th>
                    <th nzAlign="center">广告ID</th>
                    <th nzAlign="center">广告名称</th>
                    <th nzAlign="center">状态</th>
                    <th nzAlign="center">适用用户</th>
                    <th nzAlign="center">开始时间</th>
                    <th nzAlign="center">结束时间</th>
                    <th nzAlign="center">操作</th>
                    </tr>
                </thead>

                <tbody cdkDropList (cdkDropListDropped)="drop($event)">
                    <tr *ngFor="let data of tableData; let index = index;" cdkDrag>
                        <td nzAlign="center">
                            {{ index + 1 }}
                        </td>
                        <!-- 广告ID -->
                        <td nzAlign="center">{{ data.id }}</td>
                        <!-- 广告名称 -->
                        <td nzAlign="center">{{ data.title || '-' }}</td>
                        <!-- 状态 -->
                        <td nzAlign="center">
                            <span [ngStyle]="{'color': data.status | currentStatus: 'color'}">
                                {{ data.status | currentStatus: 'text' }}
                            </span>
                        </td>
                        <!-- 适用用户 -->
                        <td nzAlign="center">
                            <nz-tag [nzColor]="'#2db7f5'" *ngIf="data.userType.indexOf('2') != -1">B端</nz-tag>
                            <nz-tag [nzColor]="'#87d068'" *ngIf="data.userType.indexOf('1') != -1">C端</nz-tag>
                            <nz-tag *ngIf="data.userType.indexOf('0') != -1">通用</nz-tag>
                        </td>
                        <!-- 开始时间 -->
                        <td nzAlign="center">{{ data.beginTime || '-' }}</td>
                        <!-- 结束时间 -->
                        <td nzAlign="center">{{ data.endTime || '-' }}</td>
                        <!-- 操作 -->
                        <td nzAlign="center">
                            <a
                                nz-button
                                nz-button-tdlink
                                nzType="link"
                                nzDanger
                                nz-popconfirm
                                nzPopconfirmTitle="确认删除吗?"
                                [nzIcon]="iconTpl"
                                [disabled]="routeForms.mode == 2"
                                (nzOnConfirm)="deleteItems(index)">
                                删除
                            </a>
                            <ng-template #iconTpl>
                                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                            </ng-template>
                            <!-- 拖拽按钮 -->
                            <i class="drop-btn" nz-icon nzType="drag" nzTheme="outline" cdkDragHandle></i>
                        </td>
                    </tr>
                </tbody>
            </nz-table>

            <!-- 分页template -->
            <!-- <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template> -->
        </div>
    </div>
    <!-- 广告配置 END -->
  
    <!-- footer -->
    <div class="footer-wrap">
        <nz-divider></nz-divider>
        <div class="foot-btns">
            <app-bt-group
                *ngIf="routeForms.mode != 2"
                btType="dashed"
                btText="保存"
                [isLoading]="subLoading"
                (btClick)="subFormData()">
            </app-bt-group>
  
            <app-bt-group
                btType="default"
                btText="返回">
            </app-bt-group>
        </div>
    </div>
</div>

<!-- model START -->
<nz-modal
    [nzWidth]="1100"
    [(nzVisible)]="isVisible"
    nzTitle="请选择"
    [nzFooter]="null"
    (nzOnCancel)="handleCancel()">

  <ng-container *nzModalContent>
    <div class="model-seach">
        <div class="seach-item">
            <label class="seach-item-label">广告名称：</label>
            <input
            class="seach-ipt"
            nz-input
            placeholder="请输入名称"
            [(ngModel)]="modelSeachForms.title"
            />
        </div>
    
        <button
            nz-button
            nzType="primary"
            (click)="seachData()">
            查询
        </button>
        <button
            nz-button
            nzType="primary"
            (click)="relationData()">
            确认选中 {{ setOfCheckedId.size }}
        </button>
    </div>

    <!-- table -->
    <nz-table
        #modelTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="modelTableForms.tableLoading"
        [nzData]="modelTableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="modelTableForms.total"
        [nzPageIndex]="modelTableForms.page"
        [nzPageSize]="modelTableForms.pageSize"
        [nzShowTotal]="modelTotalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
        (nzCurrentPageDataChange)="onCurrentPageDataChange($event)">
        <thead>
            <tr>
                <th
                    [width]="50"
                    nzAlign="center"
                    [(nzChecked)]="checked"
                    [nzIndeterminate]="indeterminate"
                    (nzCheckedChange)="onAllChecked($event)">
                </th>
                <th [width]="80" nzAlign="center">广告ID</th>
                <th [width]="180" nzAlign="center">广告名称</th>
                <th [width]="120" nzAlign="center">适用用户</th>
                <th [width]="150" nzAlign="center">开始时间</th>
                <th [width]="150" nzAlign="center">结束时间</th>
                <th nzAlign="center">状态</th>
                <th nzAlign="center">备注</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of modelTable.data">
                <td
                [nzChecked]="setOfCheckedId.has(data.id)"
                (nzCheckedChange)="onItemChecked(data.id, $event, data)">
            </td>
            <!-- 广告ID -->
            <td nzAlign="center">
                <a nz-button nzType="link" (click)="jumpPage(data)">{{ data.id }}</a>
            </td>
            <!-- 广告名称 -->
            <td nzAlign="center">{{ data.title }}</td>
            <!-- 适用用户 -->
            <td nzAlign="center">
                <nz-tag [nzColor]="'#2db7f5'" *ngIf="data.userType.indexOf('2') != -1">B端</nz-tag>
                <nz-tag [nzColor]="'#87d068'" *ngIf="data.userType.indexOf('1') != -1">C端</nz-tag>
                <nz-tag *ngIf="data.userType.indexOf('0') != -1">通用</nz-tag>
            </td>
            <!-- 开始时间 -->
            <td nzAlign="center">{{ data.beginTime || '-' }}</td>
            <!-- 结束时间 -->
            <td nzAlign="center">{{ data.endTime || '-' }}</td>
            <!-- 有效状态 -->
            <td nzAlign="center">
                <span [ngStyle]="{'color': data.status | currentStatus: 'color'}">
                    {{ data.status | currentStatus: 'text' }}
                </span>
            </td>
            <!-- 备注 -->
            <td nzAlign="center">{{ data.remark || '-' }}</td>
            </tr>
        </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #modelTotalTemplate let-total>共有 {{ modelTableForms.total }} 条</ng-template>
  </ng-container>
</nz-modal>
<!-- model END -->